<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>找回密码</title>
<script type="text/javascript" src="../static/jquery-easyui-1.5.5.3/jquery.min.js"></script>
<link href="../webjars/bootstrap/3.3.7-1/css/bootstrap.css" rel="stylesheet" type="text/css">

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}

	body{
		background: url("../static/img/风水.jpeg") no-repeat;
		background-size: cover;
		height: 100%;
	}

	.form-group{
		width:30%;
		
	}
	#heard{
		width: 100%;
		height: auto;
		margin-bottom: 20px;
		padding-left: 20px;
	}

</style>
</head>
<body>
	<div id="heard">
		<h2 style="color: white;">找回密码</h2>
		<a href="login" style="color: white;"><span class="glyphicon glyphicon-home"></span> 登录界面</a>
	</div>
	<div id="logo">
		<div id="denlu">
			<form action="save" id="myform" method="post" class="form-horizontal" >
				
				<div class="form-group">
					<label for="user" class="col-md-3 control-label" >电子邮箱</label>
					<div class="col-md-7">
						<input type="text" class="form-control" name="username" id = "username" onchange="fun(this.value);" placeholder="登录邮箱">
					</div>
				</div>
				<div class="form-group">
					<label for="pass" class="col-md-3 control-label">验证码</label>
					<div class="col-md-4">
						<input type="text" onchange="fun_1(this.value);" class="form-control" name="code" id = "code" placeholder="验证码">
					</div>
					<div class="col-md-3">
						<label class="control-label" style="padding-top: 0px;"><input disabled="disabled" type = "button" id="yzm" class="btn btn-success" value="发送验证码" /></label>
					</div>
				</div>
				<div id="zhmm_1" style="display: none">
					<div class="form-group">
						<label for="pass" class="col-md-3 control-label">新密码</label>
						<div class="col-md-7">
							<input type="password" class="form-control" name="pwd1" id = "pwd1" placeholder="请输入新密码">
						</div>
					</div>
					<div class="form-group">
						<label for="pass" class="col-md-3 control-label">确认密码</label>
						<div class="col-md-7">
							<input type="password" class="form-control" name="pwd2" id = "pwd2" placeholder="请确认新密码">
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-4 col-md-offset-3">
							<button type="button" id = "btn_1" class="btn btn-success">确定</button>
						</div>
					</div>
				</div><br>
			</form>
		</div>
	
		<div id="pager" style="margin-left: 3%;color: white;">
			<p style="font-size: 16px;">温馨提示：当你输入正确的邮箱时，然后在选中验证码框的时候会给您一个提示信</p>
			<p style="font-size: 16px;">息，如果邮箱验证通过即可点击发送验证码；其次，当验证码验证正确需要手动按</p>
			<p style="font-size: 16px;">一下 Tab键 方可在下方跳出输入密码功能进行找回密码功能！</p>
			<p style="color: red;font-size: 16px;">特殊提示：发送验证码时有一点卡顿，请等待。。。。。</p>
		</div>
	</div>
	
	<script type="text/javascript">
		var a = window.innerHeight - 500 + "px";
		$("#logo").css('height', a);
		
		function fun(str){
			$.post('username', {username: str}, function(data){
				if(!data){
					alert("电子邮箱输入错误！");
				}else{
					$("#yzm").prop('disabled', false);
				}
			});
		}
		var code = -1;
		var dsq1;
		$("#yzm").click(function(){
			code = -1;
			var username = $("#username").val();
			$.post('username', {username: username}, function(data){
				if(data){
					$.post('yx', {username: username}, function(data1){
						code = data1;
						dsq1 = setInterval("sj();", 1000);
					});
				}
			});
		});
		function fun_1(str){
			if(code == str){
				$("#zhmm_1").css("display", "block");
			}else{
				alert("验证输入错误");
			}
		}
		var i = 60;
		function sj(){
			$("#yzm").val("("+i+")获取验证码");
			$("#yzm").prop('disabled', true);
			i--;
			if(i == 0){
				i = 60;
				window.clearInterval(dsq1);
				code = -1;
				$("#yzm").val("重新获取验证码");
				$("#yzm").prop('disabled', false);
			}
		}
		
		$("#btn_1").click(function(){
			var username = $("#username").val();
			var pwd1 = $("#pwd1").val();
			var pwd2 = $("#pwd2").val();
			var code1 = $("#code").val();
			if(pwd1 == "" || pwd1 == null){
				alert("请输入新密码");
			}else if(pwd2 == "" || pwd2 == null){
				alert("请再次输入新密码");
			}else if(pwd1 != pwd2){
				alert("两次密码不一致");
			}else{
				$.post('username', {username: username}, function(data){
					if(data){
						$.post("zhmm1", {"username": username, "password": pwd1}, function(data){
							alert(data);
							window.location.href="login";
						});
					}
				});	
			}
		});
		$(window).resize(function(){
		    var a = window.innerHeight - 100 + "px";
			$("#logo").css('height', a);
		});
	</script>
</body>
</html>